<template>
  <div class="fenxiao-order">
    <dlsHeader :type="3"
               :Data="headerData"></dlsHeader>
    <div class="fenxiao-nav">
      <div class="aGroup">
        <scroll class="wrapper"
                ref="wrapper"
                :data="arr"
                :startX="0"
                :click="true"
                :scrollX="true"
                :scrollY="false"
                :eventPassthrough="'vertical'">
          <div class="content">
            <van-button class="span" data-id="1"  @click="selectItem(1)" :color="type == 1 ? '#F30C23':'#999999'" plain hairline round type="primary">
              <i>全部</i>
              <em>{{arr['1']}}</em>
            </van-button>
            <van-button class="span" data-id="2"  @click="selectItem(2)" :color="type == 2 ? '#F30C23':'#999999'" plain hairline round type="primary">
              <i>未付款</i>
              <em>{{arr['2']}}</em>
            </van-button>
            <van-button class="span" data-id="3"  @click="selectItem(3)" :color="type == 3 ? '#F30C23':'#999999'" plain hairline round type="primary">
              <i>已付款</i>
              <em>{{arr['3']}}</em>
            </van-button>
            <van-button class="span" data-id="4"  @click="selectItem(4)" :color="type == 4 ? '#F30C23':'#999999'" plain hairline round type="primary">
              <i>已确认收货</i>
              <em>{{arr['4']}}</em>
            </van-button>
            <van-button class="span" data-id="5"  @click="selectItem(5)" :color="type == 5 ? '#F30C23':'#999999'" plain hairline round type="primary">
              <i>退换货</i>
              <em>{{arr['5']}}</em>
            </van-button>
          </div>
        </scroll>
      </div>
      <!-- 时间筛选 -->
      <date-search @SearchData="SearchData"></date-search>
      <!-- 搜索关键词 -->
      <div class="head-wrap">
        <div class="head-search-item">
          <input
            type="text"
            v-model="keywords"
            placeholder="请输入会员ID/昵称/商品名称/订单号"
            @confirm="searchGoodsEvent"
            ref="searchInput">
          <div class="icon" @click="searchGoodsEvent">
            <!-- <svg-icon icon-class="icon_search" /> -->
            <img class="icon_search" src="https://img.wifenxiao.com/h5-wfx/images/common/search-icon.png" alt="">
          </div>
        </div>
      </div>
    </div>

    <div class="user-list"
         v-show="list.length">
      <van-list v-model="loading"
                :finished="finished"
                :error.sync="error"
                :immediate-check="immediateCheck"
                error-text="请求失败，点击重新加载"
                finished-text=""
                @load="onLoad">
        <div v-for="(item, index) in list"
             :key="index"
             class="item">
          <div class="dhs-virtual-icon"
               v-if="item.is_dhs_virtual == 1"></div>
          <div class="fxordertit clearfix">
            <span class="fl">订单日期：{{item.end_time}}&nbsp;</span>
            <span class="fl">付款日期：{{item.pay_time}}</span>
            <span class="fr"
                  :class="[item.status == 3 ? 'ready' : '']">{{item.status_name}}</span>
          </div>
          <div class="fxorderlst clearfix">
            <div class="dxPic fl">
              <img :src="item.avthor||defaultPhotoImg"
                   class="user"
                   width="100%" />
            </div>
            <div class="fxorderinfo fl">
              <div>
                <p>姓名：</p>
                <p>{{item.receiver_name}}</p>
              </div>
              <div v-if="item.user_mobile">
                <p>手机号：</p>
                <p>{{ item.user_mobile }}</p>
              </div>
              <div>
                <p>{{item.commission_name}}：</p>
                <p>{{mSymbol.name}}{{item.commission}}</p>
              </div>
              <div>
                <p>金额：</p>
                <p>{{mSymbol.name}}{{item.money}}</p>
              </div>
              <div>
                <p>状态：</p>
                <p>{{item.order_status}}</p>
              </div>
              <p class="check_detail"
                 @click="Jump(item.order_id)">
                 <van-button  class="send-btn" color="#F30C23" plain hairline round type="primary">查看订单商品明细</van-button>
                <!-- <svg-icon icon-class="icon_right"
                          class="all-class-icon"></svg-icon> -->
              </p>
            </div>
          </div>

        </div>
      </van-list>
    </div>
    <div v-show="!list.length && finished">
      <no-data :noData="noData"></no-data>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import noData from '@/components/noData/index'
import dlsHeader from '@/views/user/dls/components/dlsHeader/index'
import Scroll from '@/components/scroll/index'
import dateSearch from './components/dateSearch/index'
import { getAgencyOrder } from '@/api/user/dls/dlsApi'
import { mapGetters } from 'vuex'

export default Vue.extend({
  data() {
    return {
      defaultPhotoImg: 'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg',
      headerData: {
        commission_name: '',
        total_commissions: '',
        total_fee: '',

        // show_dl_product: null,
        agent_item_count: '',
        agent_item_name: '',
        show_dl_agencies: null,
        agency_total: '',
        ftitle_agents: '',
        show_dl_agency_user: null,
        agency_user_total: '',
        ftitle_agency_user: '',
        show_dl_agency_order: null,
        agency_order_total: '',
        ftitle_agency_order: ''
      },
      arr: {
        1: '',
        2: '',
        3: '',
        4: ''
      },
      type: 1,
      p: 1,
      noData: {
        text: '暂无订单',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_order_data.png',
        marginTop: '1.6em'
      },
      loading: false,
      finished: false,
      error: false,
      immediateCheck: false,
      list: [],
      startData: '',
      endDate: '',
      keywords: '' // 搜索关键词

    }
  },
  created() {
    this.init()
  },
  mounted() {
      // TODO 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.onLoad()
      })
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      this.finished = false
      this.p = 1
      this.list = []
      this.onLoad()
    },
    onLoad() {
      if (this.finished) return false
      const data = {
        p: this.p,
        type: this.type,
        search_start_time: this.startData,
        search_end_time: this.endDate,
        order_no: this.keywords
      }
      getAgencyOrder(data).then(res => {
        this.loading = false
        this.$loadingWrap.close()
        if (res.status == 1) {
          if (data.p == 1) {
            // 头部和导航数据
            this.headerData.commission_name = res.data.commission_name
            this.headerData.total_commissions = res.data.total_commissions
            this.headerData.total_fee = res.data.total_fee
            // 代理产品
            // this.headerData.show_dl_product = res.data.show_dl_product
            this.headerData.agent_item_count = res.data.agent_item_count
            this.headerData.agent_item_name = res.data.agent_item_name
            // 代理商
            this.headerData.show_dl_agencies = res.data.show_dl_agencies
            this.headerData.agency_total = res.data.agency_total
            this.headerData.ftitle_agencies = res.data.ftitle_agencies

            // 会员
            this.headerData.show_dl_agency_user = res.data.show_dl_agency_user
            this.headerData.agency_user_total = res.data.agency_user_total
            this.headerData.ftitle_agency_user = res.data.ftitle_agency_user
            // 订单
            this.headerData.show_dl_agency_order = res.data.show_dl_agency_order
            this.headerData.agency_order_total = res.data.agency_order_total
            this.headerData.ftitle_agency_order = res.data.ftitle_agency_order
            // 按钮
            this.arr = res.data.arr

            // 其它
            this.is_fx_order_mobile = res.data.is_fx_order_mobile

            // 页码为1时   初始列表
            this.list = []
          }
          // 列表
          this.list.push(...res.data.order_list)
          if (res.data.order_list.length < 10) {
            this.finished = true
          } else {
            this.p++
          }
        } else {
          this.$Error(res.mag)
        }
      })
    },
    // 切换类型
    selectItem(type) {
      if (this.type == type) return
      this.type = type
      this.p = 1
      this.finished = false
      this.error = false
      this.loading = false
      // this.list = []
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      this.onLoad()
    },
    // 时间查找
    SearchData(startData, endDate) {
      this.startData = startData
      this.endDate = endDate
      this.p = 1
      this.finished = false
      this.error = false
      this.loading = false
      // this.list = []
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      this.onLoad()
    },

    Jump(order_id) {
      const path = 'agencyOrderDetail'
      this.$JumpPath(this, path, { order_id })
    },
    // 根据会员id/昵称/商品名称/订单号进行搜索
    searchGoodsEvent() {
      this.$refs.searchInput.blur()
      this.p = 1
      this.finished = false
      this.error = false
      this.loading = false
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      this.onLoad()
    }
  },
  components: {
    dlsHeader,
    noData,
    Scroll,
    dateSearch
  },
  computed: {
    // 获取自定义符号
    ...mapGetters(['mSymbol'])
  }
})
</script>

<style lang="scss">
@import "src/styles/variables";
@import "src/styles/user/Group/index";
@import "src/styles/user/orderList/index";
.fenxiao-nav {
  border-top: 1px solid #ededed;
  padding: 10px 30px;
  background: #fff;
  .wrapper{
    overflow-x: auto;
    &::-webkit-scrollbar{
      display: none;
    }
  }
}
.head-wrap{
  .head-search-item{
    position: relative;
    width: 100%;
    height: 60px;
    border-radius: 20px;
    border: 2px solid #EDEDED;
    background: rgba(242,242,242,0.35);
    overflow: hidden;
    input {
      padding: 0 14px 0 58px;
      width: 100%;
      height: 100%;
      color: #999999;
    }
    .icon {
      position: absolute;
      left: 16px;
      top: 16px;
      color: #999999;
      font-size: 28px;
      margin-right: 14px;
      .icon_search{
        width:28px;
        height:28px;
      }
    }
  }
}
.miniprogram-root {
  .user-list .item .fxorderlst .dxPic .h5-img {
    width: 100%!important;
    height: 100%;
  }
}
</style>
